<template>
  <div class="dashboard-page">
    <h1 class="page-title">数据概览</h1>

    <!-- 数据卡片区域 -->
    <el-row :gutter="20" class="mb-20">
      <el-col :span="6" v-for="card in dataCards" :key="card.label">
        <DataCard
          :icon="card.icon"
          :label="card.label"
          :value="card.value"
          :color="card.color"
        />
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="card">
          <h2 class="section-title">职位类别分布</h2>
          <div class="chart-container" style="height: 400px">
            <!-- ECharts图表将在这里渲染 -->
            <LoadingSpinner v-if="loading" />
            <div v-else>图表占位</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import DataCard from '@/components/common/DataCard.vue'
import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
import { analytics } from '@/api'

const loading = ref(true)

const dataCards = ref([
  { icon: 'Document', label: '职位总数', value: 0, color: '#409EFF' },
  { icon: 'OfficeBuilding', label: '公司数量', value: 0, color: '#67C23A' },
  { icon: 'Money', label: '平均薪资', value: '-', color: '#E6A23C' },
  { icon: 'Location', label: '城市数量', value: 0, color: '#F56C6C' }
])

// 获取数据
const fetchData = async () => {
  try {
    loading.value = true
    const res = await analytics.getOverview()
    
    dataCards.value[0].value = res.data.total_positions
    dataCards.value[1].value = res.data.total_companies
    dataCards.value[2].value = `${res.data.avg_salary}k`
    dataCards.value[3].value = res.data.total_cities
    
  } catch (error) {
    console.error('获取数据失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped>
.dashboard-page {
  min-height: 100%;
}

.chart-container {
  position: relative;
}
</style>

